<template>
    <div class="faq">
        <div class='moduleHead' >
            <span @click="$router.back()" class="back"></span>
            <span>{{language.faq_title}}</span>
        </div>
        <div class="search_box">
            <input @input="matchKeyword" @blur="blurSearchInput" type="text" spellcheck="false" autocapitalize="off" autocorrect="off" :placeholder="language.faq_searchInputTip">
            <span class="ico_search"></span>
        </div>
        <div class="body">
            <div @click="listClick" ref='list' class="list_box">
                <div class="line"> 
                    <div class="title">How it works?</div>
                    <div class="content">
                        When you first join our site, you become a free member. This allows you to create profile, add up to 26 photos, search for people by country / by state / by city, create a favorites list and send unlimited winks! You'll be alerted by email if somebody on the site adds you as a favorite, winks at you, or sends you a message. You're also able to respond to an email sent to you by Gold Members!<br>
                        Should you decide to become a Gold Member yourself though, you'll also be able to access<br>
                        all services without any limitation:<br>
                            •   Initiate sending emails / chatting online<br>
                            •   Email / Wink filter settings<br>
                            •   Photo / Profile security options<br>
                            •   View compatible matches / Reverse matches<br>
                            •   View last login time<br>
                            •   Search for people by Advanced / Saved / Keywords, State / Province or Zip / Postal Code / City and so on.<br>
                    </div>
                </div>

                <div class="line"> 
                    <div class="title">How long will it take for my photo to appear?</div>
                    <div class="content">Normal posting time for photos is 24 hours. Our staff must approve each photo to maintain the quality of matches available through Sitename.com. For express approval you may reach us by phone at 1-416-628-1072.</div>
                </div>

                <div class="line"> 
                    <div class="title">What is wink?</div>
                    <div class="content">It is a quick, fun way to let someone know you're interested. You pick a one-liner from the list, and it's sent to the member of your choice. The member gets the wink in the webmail or email address and then can go to your profile and wink back with you. <br>
                    All users can send winks for free. If you’d like to take it a step further, then upgrade to a gold member and send an email to start up a real conversation.</div>
                </div>

                <div class="line"> 
                    <div class="title">What's 'Private Photo Album' all about?</div>
                    <div class="content">
                        A place to share your private photos - choose which members to give access to.<br>
                        You can view all of your private photo shares on “Who has access”page. You can gain the access to others by clicking “Share private photo” on the other’s profile
                    </div>
                </div>

                <div class="line"> 
                    <div class="title">I am a standard member. Do I have to become a gold member to reply to messages sent by others?</div>
                    <div class="content">As a standard member, you can reply to all messages and winks sent to you by hitting "reply" at our webmail or your personal email box, which you used when registering. You can click on the profile link at the bottom of the "Wink" email. That will take you to the user's profile where you can reply with a free wink.</div>
                </div>

                <div class="line"> 
                    <div class="title">Can you tell me how the charge will appear on my billing statement?</div>
                    <div class="content">It will show up as SUCCESSFULMATCH.COM on your billing statement.</div>
                </div>

                <div class="line"> 
                    <div class="title">How does the instant messenger work？</div>
                    <div class="content">Instant messaging is a fun and easy way to communicate instantly with other members who are online. Once you have logged into your account, simply click the Message and you will automatically be directed to the instant messaging screen. To initiate a private chat, click on the username/avatar of the person you would like to chat with. To log off simply close the chat screen.</div>
                </div>
                
                <div class="line"> 
                    <div class="title">I upgrade，but still can not send message.</div>
                    <div class="content">There maybe some delay when making your membership react. Please log out, then log in to check again.</div>
                </div>

                <div @click="clickShowMore" v-if="showMore" class="show_more">See more >></div>

                <div class="line"> 
                    <div class="title">Mobile site is slow./ Mobile site dose not work well even after I was told it’s fixed already.</div>
                    <div class="content">Please refresh the page, shut the browser, then re-login. Or you can clear the cookies to try again.</div>
                </div>
                <div class="line"> 
                    <div class="title">Page/Message page freezes when I switch from one tab to another.</div>
                    <div class="content">Please refresh the site, when you someday meet the problem of page freezing.</div>
                </div>
                <div class="line"> 
                    <div class="title">I forgot my username / password. Can you tell me what it is?</div>
                    <div class="content">No problem! Just click Forgot password? at the login screen. Enter either your registered email address or your username. We'll then send you a password reset link to your registered email address, usually within a few minutes. If you don't receive it, please make sure to check your spam/junk folder. This link will work for 24 hours only.</div>
                </div>
                <div class="line"> 
                    <div class="title">Why is SuccessfulMatch on my bill? I signed up for Sitename.com</div>
                    <div class="content">SuccessfulMatch is the name of the parent company, which owns and operates PositiveSingles.com and many other dating sites. The purchase will show up in the billing statement under the name of SuccessfulMatch for billing purposes.</div>
                </div>
                <div class="line"> 
                    <div class="title">How do I delete my profile?</div>
                    <div class="content">A:  To cancel, click on “Setting”, you can delete your profile under “Account change” of “Privacy” .<br>
                    Note: Your information will be kept in our database for two years. You may contact us within the two years to retrieve and reactivate your account; otherwise, it will be deleted permanently.
                    </div>
                </div>
                <div class="line"> 
                    <div class="title">Tips on Online Dating Safety</div>
                    <div class="content">
                        1.  Don't post personal information. Wait until you feel comfortable with an individual before telling them things like your phone number or place of work or address.<br>
                        2.  Never give out your bank account details or any other financial information. If you are approached by any member then report them immediately.<br>
                        3.  Don't let anyone pressure you into giving away more information than you want to.<br>
                        4.  Beware of solicitation - watch out for anyone offering financial advice or asking for charitable contributions.<br>
                        5.  Even if you're arranging to meet someone, do not give out any unnecessary personal details such as your home address.<br>
                        6.  If you feel unsure or threatened by someone's behavior, stop contacting with them immediately. Visit their profiles and use the block button to prevent any further contact.
                    </div>
                </div>
                <div class="line"> 
                    <div class="title">I am a standard member. Do I have to become a gold member to reply to messages sent by others?</div>
                    <div class="content">As a standard member, you can reply to all messages and winks sent to you by hitting "reply" at our webmail or your personal email box, which you used when registering. You can click on the profile link at the bottom of the "Wink" email. That will take you to the user's profile where you can reply with a free wink.</div>
                </div>
                <div class="line"> 
                    <div class="title">How do I hide my profile?</div>
                    <div class="content">To hide, click on “Setting”, you can hide your profile under “Account change” of “Privacy” .</div>
                </div>
                <div class="line"> 
                    <div class="title">Can I freeze or pause my account for some time so that I can continue it later?</div>
                    <div class="content">At present, the system does not allow freezing gold membership. However you can cancel the gold membership by going to "Other membership services" under "My Settings" item. Or you can hold your account at this time on “Account Change” under “Privacy”.</div>
                </div>
                <div class="line"> 
                    <div class="title">'What is the meaning of the Heart and the Crown symbols?'</div>
                    <div class="content">The Heart indicates a "Favorite" profile. The Crown indicates a "Premium" member.</div>
                </div>
                <div class="line"> 
                    <div class="title"> 'Why was my subscription automatically renewed and how do I turn on / off auto subscription / auto billing / auto renewal?</div>
                    <div class="content">In order for you to spend more time finding your match and less time paying bill, your subscription will be auto-renewed at the monthly rate until you cancel gold membership. You can easily turn off auto-renewal on the "Subscription status" page after login or by contacting customer service or call 1-416-628-1072.<br>
                    You can find "Subscription status" page by clicking on "Other Membership Services" under "My Settings" category.
                    </div>
                </div>
                <div class="line"> 
                    <div class="title">It keeps saying my credit card # is invalid and I know that my number is ok.</div>
                    <div class="content">
                        The payment processing company has difficulty in processing your card. Please make sure the billing address at our site is exactly the same as your card billing address. If it is, there may be something wrong with your card. Please ensure that all card data is correct, including billing address, expiration date, card number and verification ID. <br>

                        And PayPal is a global online payment system that's convenient, easy to use and secure. Using PayPal makes it easy for you to make purchases online, and you never have to re-enter your credit card numberor other financial information once your PayPal account is set up. Try it. <br>

                        You can also use check, money order or a different card.
                    </div>
                </div>
                <div v-show="noSearchData" v-html="language.faq_nodataTip" class="noData"></div>
            </div>
        </div>
    </div>
</template>
<script>

let keywordArr = [],
    domLines;

export default {

    name: 'faq',

    data() {
        return {
            showMore:true,
            noSearchData:false,
        }
    },

    // components: {},
    // activated() {},

    mounted(){
        let tthis = this;
        domLines = this.getChildNodesClass(this.$refs.list, 'line');
        domLines.forEach(function(curDom) {
            var keyword = _.trim(tthis.getChildNodesClass(curDom,'title')[0].innerText);
            keywordArr.push(keyword);
        })
    },

    methods: {

        blurSearchInput(e){
            e.target.className = e.target.value ? 'left' : '';
        },

        clickShowMore(e){
            this.showMore = false;
        },

        listClick(e){
            if(e.target.className == 'title'){
                let contentDom = this.getChildNodesClass(e.target.parentNode, 'content')[0];
                contentDom.style.display = contentDom.style.display == 'block' ? 'none' : 'block';
            }
        },

        matchKeyword(e){
           let tthis=this;
           setTimeout(function(){
                tthis.matchKeywordDelay(e)
           },500)
        },

        matchKeywordDelay(e){
            let tthis=this,
                inputVal = _.trim(e.target.value),
                matchSuccArr = [];
            
            if(inputVal){
                this.showMore = false;
                keywordArr.forEach(function(val,index){
                    let formatRep = inputVal.replace(/(\[|\]|\\|\^|\$|\.|\||\?|\*|\+|\(|\))/g,'\\'+'$1'),
                        reg = new RegExp(formatRep,"i"); 
                    if(val.match(reg)){
                        matchSuccArr.push(index);
                    }
                })
                domLines.forEach(function(curDom,index) {
                    if(_.indexOf(matchSuccArr, index) > -1){
                        curDom.style.display = 'block';
                        tthis.getChildNodesClass(curDom, 'content')[0].style.display = 'none';
                    }else{
                        curDom.style.display = 'none';
                    }
                });
                tthis.noSearchData = matchSuccArr.length < 1 ? true : false;
            } else{
                domLines.forEach(function(curDom) {
                    curDom.style.display = 'block';
                });
                this.showMore = true;
            }
        },

        getChildNodesClass(parent, cls){
            var res = [],
                ele = parent.childNodes;
            for(var i = 0; i < ele.length; i++){
                if(ele[i].className == cls){
                  res.push(ele[i]);
                }
            }
            return res;
        },
    }
}

</script>
<style scoped>
.faq {
    padding-top: 94px;
}

.faq .search_box{
    position: absolute;
    left:0;
    top: 44px;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 10px;
    background: #e4e4e4;
}

.faq .body{
    padding: 6px 0 20px;
}

.faq .search_box .ico_search {
    content: '';
    position: absolute;
    width: 30px;
    height: 16px;
    left: 48%;
    top: 50%;
    margin: -9px 0 0 -60px;
    background: url(../assets/ico_search.png) center no-repeat;
    background-size: 16px auto;
}

.faq .search_box input {
    width: 100%;
    border: 0;
    height: 30px;
    line-height: 20px;
    text-align: center;
    background-color: #fff;
    font-size: 14px;
    float: left;
}

.faq .search_box input:focus,
.faq .search_box input.left {
    text-indent: 32px;
    text-align: left;
}

.faq .search_box input:focus + .ico_search,
.faq .search_box input.left + .ico_search {
    left: 12px;
    margin-left: 0;
}

.faq .list_box{
    padding: 0 10px;
}

.faq .list_box .line{
    margin-top: 14px;
    font-size: 14px;
    border:1px solid #e6e6e6;
    border-radius: 3px;
}

.faq .list_box .line .title{
    font-size: 16px;
    padding: 10px 12px;
    color: #222;
    background:#ededed;
    background:-moz-linear-gradient(top, #fff, #ededed);  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ededed));  
}

.faq .list_box .line .title::before{
    content: "";
    width: 0;
    height: 0;
    line-height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #bbbbbb;
    float: left;
    margin-top: 6px;
    margin-right: 5px;
}

.faq .list_box .line .content{
    color: #333;
    display: none;
    padding: 12px 18px;
    background-color: #fbfbfb;
}

.faq .list_box .show_more{
    text-align: right;
    line-height: 40px;
    padding-right: 10px;
}

.faq .list_box .show_more ~ div{
    display: none!important;
}

.faq .list_box .noData{
    padding: 20px 6px;
    text-align: center;
    line-height: 26px;
    color: #666;
}

</style>
